<template>
    <div class="couponContainer" :style="'min-height: '+docheight+'px'">
        <div v-if="!showTimeOut">
            <div class="mainCont">
                <div class="navCont">
                    <div @click="navFn(item,index)" :class="navId==item.id?'navItem navActive':'navItem'" :key="index" v-for="(item,index) in navArr">{{ item.name }}</div>
                </div>
                <div class="couponList">
                    <div class="couponItem" @click="getCoup(item)" :key="index" v-for="(item,index) in couponArr">
                    <div class="couponNei">
                        <div class="couponLeft">
                        <div class="couponTip">满减优惠券</div>
                        <div class="fullVal">满{{ item.full }}元可使用</div>
                        <div class="couponTime">
                            <div class="scaleTime" v-if="navId==1">有效期至:{{ item.expiration_time }}</div>
                            <div class="scaleTime" v-if="navId==2">已到期</div>
                            <div class="scaleTime" v-if="navId==3">已失效</div>
                        </div>
                        </div>
                        <div class="couponRight">
                        <div class="reduceMoney">
                            <span>¥</span>
                            <span class="reduceText">{{ item.reduce }}</span>
                        </div>
                        </div>
                        <div class="couponRadio radioLeft"></div>
                        <div class="couponRadio radioRight"></div>
                    </div>
                    </div>
                    <div class="loadMore" v-if="isChageNav">数据请求中~</div>
                    <div class="loadMore" v-if="couponArr.length>0&&!isChageNav">{{ loadMoreText }}</div>
                    <nodata v-if="couponArr.length==0&&!isChageNav" text="暂无该类优惠券~"></nodata>
                </div>
            </div>
        </div>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
        <getLoad v-if="!showCont"></getLoad>
        <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
    import {Toast } from 'vux' 
    import subLoad from '@/components/public/subLoad.vue'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import {Coupon} from '@/http/api'
    import nodata from '@/components/public/nodata'

    export default {
      components: {nodata,getLoad,getTimeOut,subLoad,Toast},
      data() {
        return {
            showTimeOut: false,
            showCont:true,
            showLoad:false,
            showText:'',
            showToast:false,
            navArr:[
                {name:'可使用',id:1},
                {name:'已到期',id:2},
                {name:'已失效',id:3},
            ],
            navId:1,
            couponArr:[],
            // 分页
            per_page:10,
            page:1,
            loadMoreText:'数据加载中~',
            isChageNav:false,
            getting:false,
            last_page:0,
        }
      },
      props: {},
      methods:{
        navFn(item){
            this.navId = item.id
            this.couponArr = []
            this.page = 1
            this.last_page = 0
            this.getData()
        },
        getData(){
          let data ={
            type:this.navId,
            per_page:this.per_page,
            page:this.page,
          }
          this.isChageNav = true
          Coupon(data).then((res)=>{
            if(res.data.code==1){
              let arr = res.data.data.data
              for(let i=0;i<arr.length;i++){
                this.couponArr.push(arr[i])
              }
              setTimeout(() => {
                this.getting = false
              }, 100);
              this.last_page = res.data.data.last_page
              if(this.page==this.last_page){
                this.loadMoreText = '到底啦～'
              }else{
                this.loadMoreText = '数据加载中~'
              }
            }else{
              this.showToast = true
              this.showText = '优惠券获取失败'
            }
            this.showCont= true
            this.isChageNav = false

          }).catch(()=>{
            this.showCont = true
            this.showTimeOut = true
          })
        },
        nextfn(){
          if(this.$route.path == '/order'){
            let h = document.documentElement.scrollHeight||document.body.scrollHeight
            let wh = document.documentElement.clientHeight||document.body.clientHeight
            let top = document.documentElement.scrollTop||document.body.scrollTop
            let bottom = h-wh-top
            if(bottom<=50){
              if(this.getting==false){
                if(this.last_page>this.page){
                  this.getting=  true
                  this.page++
                  this.getData()
                }
              }
            }
          }
        }
      },
      mounted(){
        window.addEventListener('scroll',this.nextfn)
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .couponContainer{
    background-color: #f9f1f1;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    box-sizing: border-box;
    .mainCont{
        background-color: #fff;
        padding: 0.75rem;
        border-radius: 0.75rem;
        box-sizing: border-box;
        width: 92%;
        margin: 0 auto;
        .navCont{
            display: flex;
            justify-content: space-between;
            .navItem{
                text-align: center;
                width: 30%;
                background-color: #f9f1f1;
                padding: 0.5rem 0;
                text-align: center;
                font-size: 0.6rem;
                border-radius: 1rem;
                color: #666;
            }
            .navActive{
                background-color: #e95551;
                color: #fff;
            }
        }
        .couponList{
        width: 100%;
        font-size: 0.6rem;
        box-sizing: border-box;
        margin-top: 1rem;
        // flex-wrap: wrap;
        .couponItem{
          width: 100%;
          display: inline-block;
          white-space: nowrap;
          border-radius: 0.25rem;
          margin-bottom: 0.75rem;
          padding: 0.35rem;
          box-sizing: border-box;
          position: relative;
          margin-right: 4%;
          background-color: #e95551;
          .couponNei{
            display: flex;
            background-image: linear-gradient(to right,#fef8ea,#fff);
            // background-color: #fff;
            position: relative;
            height: 4rem;
            box-sizing: border-box;
            overflow: hidden;
            
            .couponRadio{
              position: absolute;
              width: 0.6rem;
              height: 0.6rem;
              top: 1.7rem;
              border-radius: 50%;
              background-color: #e95551;
            }
            .radioLeft{
              left: -0.3rem;
            }
            .radioRight{
              right: -0.3rem;
            }
            .couponLeft{
              width: 65%;
              border-right: 0.1rem dashed #e95551;
              padding: 0.25rem 0.5rem;
              box-sizing: border-box;
              color: #e95551;
              .couponTip{
                font-size: 1rem;
                font-weight: bold;
              }
              .couponTime{
                font-size: 0.6rem;
                background-color: #e95551;
                color: white;
                // transform: scale(0.5);
                color: white;
                padding: 0.1rem;
                box-sizing: border-box;
                margin-top: 0.25rem;
                display: inline-block;
                border-radius: 0.1rem;
                .scaleTime{
                  transform: scale(0.8);
                }
              }
            }
            .couponRight{
              width: 35%;
              display: flex;
              justify-content: center;
              align-items: center;
              .reduceMoney{
                color: #e95551;
                display: table-cell;
                font-size: 0.8rem;
                .reduceText{
                  font-size: 1.5rem;
                }
              }
            }
          }
        }
        .loadMore{
          text-align: center;
          padding: 0.75rem 0;
          font-size: 0.6rem;
          color: #e95551;
        }
      }
    }
  }
  </style>
